<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<view class="back">
			<image  v-if="studyState" class="back-icon" src="https://www.afbeijing.net/static_resources/assets/back.png" @click="back()"></image>
			<view :class="studyState?'title-text':'title-text1'">
				课程列表
			</view>
		</view>
		<!-- 提交加载 结束-->
		<view class="heard">
			<u-row gutter="16">
				<u-col span="9">
					<view class="title">
						{{titleText2.clsName||'请选择班级'}}
					</view>
					<!-- <view class="shuoming">
						此班级为第2阶段课程共18节，已学习3节课
					</view> -->
				</u-col>
				<u-col span="3">
					<view class="genghuanbanji" @click="open">
						<image class="jiaohuan-icon"
							src="https://www.afbeijing.net/static_resources/assets/genghuanbanji.png" />
						<text class="textStyle">更换班级</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="main" v-for="(m,k) in dataList" :key="k" v-if="dataList.length!==0">
			<!-- <u-row gutter="16">
				<u-col span="12">
					<view class="week">{{i.week}}</view>
				</u-col>
			</u-row> -->
			<view class="case">
				<u-row gutter="16">
					<u-col span="8">
						<view class="point-container-inline">
							<image class="point-icon1" :src="m.statusName==='已完成'?'https://www.afbeijing.net/static_resources/assets/yiwancheng.png':m.statusName==='未开始'?'https://www.afbeijing.net/static_resources/assets/weikaishi-2.png':m.statusName==='学习中'?'https://www.afbeijing.net/static_resources/assets/xuexizhong.png':'https://www.afbeijing.net/static_resources/assets/weixuexi.png'" />
							<text class="className">{{m.crsName}}</text>
						</view>
					</u-col>
					<u-col span="4">
						<view class="btnStyle">
							<view :class="m.statusName==='已完成'?'state-ywc':m.statusName==='学习中'?'state-jxz':m.statusName==='未学习'?'state-wxx':'state-wks'" @click="goToRegister(m)">
								<!-- learnProgress -2未购买 -1未开始 0未学习 1学习中 2已完成 -->
								<text>{{m.statusName}}</text>
								<!-- <text v-else>{{m.learnProgress===1?'进行中':m.learnProgress===0?'未学习':'未开始'}}</text> -->
								<image class="jiantou-icon" src="https://www.afbeijing.net/static_resources/assets/jiantou3.png" />
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="zhanwei" v-if="dataList.length!==0">
			----- 已加载完 -----
		</view>
		<view class="empty" v-if="dataList.length===0">
			<u-empty
					mode="car"
					text="暂无数据"
					icon="https://www.afbeijing.net/static_resources/assets/empty.png"
					textColor="#808080"
					textSize="36rpx"
			>
			</u-empty>
		</view>
		<!-- 弹出班级选择 -->
		<u-popup :show="show" :round="30" mode="bottom" @close="close">
			 <!-- keyName="label"  -->
			<u-picker :show="show"  style="height: 100px;" @change="pickerChange" :columns="titleList" keyName="clsName" confirmText="取消" itemHeight="38"  title="选择班级"  cancelColor="#FFB607" confirmColor="#ffffff" @confirm="pickerCancel" >
				
			</u-picker>
			<view class="button_qd" @click="pickerConfirm">确定</view>	
		</u-popup>
		<!-- 弹出班级选择 结束 -->
	</view>
</template>

<script>
	import { queryCrsByStuCls,queryClsByStageId,queryClsNoStage } from './api/index.js';
	import { getRefreshInfo } from '@/src/tools/index.js'
	import eventBus from '@/common/eventBus.js';
	export default {
		data() {
			return {
				pageLoading:false,
				studyId: null,
				studyState:false,
				show: false,
				changeState: 0,
				clsId:null,//选中的班级ID
				titleText: {},
				titleText2: {},
				titleInfo: null,
				stageId:null,
				titleList: [],
				dataList:[],//课程列表
				data1: [{
						week: "第一周",
						case: [{
								className: "第1节",
								state: "0",
								points: "+10"
							},
							{
								className: "第2节",
								state: "0",
								points: "+10"
							}
						]
					},
					{
						week: "第二周",
						case: [{
								className: "第3节",
								state: "1",
								points: "0"
							},
							{
								className: "第4节",
								state: "1",
								points: "0"
							}
						]
					},
					{
						week: "第三周",
						case: [{
								className: "第5节",
								state: "2",
								points: "0"
							},
							{
								className: "第6节",
								state: "2",
								points: "0"
							}
						]
					}
				]
			}
		},
		/**
		 * 页面加载时触发
		 * 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数
		 */
		onReady(options) {
			// var that=this
			 // uni.$on('templateClick', this.handleTemplateClick);
			 console.log('onReadyonReadyonReadyonReadyonReady')
			 
			this.stageId= uni.getStorageSync('stageObj').stageId
			console.log('this.stageId：',this.stageId)
			this.stageList()
		},
		/**
		 * 页面加载时触发
		 * 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数
		 */
		onLoad(options) {
			this.getRefreshInfo()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		
		/**
		 * 页面显示时触发
		 * 每次打开页面都会触发
		 */
		onShow() {
			this.getRefreshInfo()
			this.userInfo = uni.getStorageSync('userInfo')
			console.log('onShowonShowonShowonShowonShowonShow')
			eventBus.$on("studyId", (data) => {
			  console.log('***eventBus***：', data)
			  this.studyId = data.studyId
			  if(this.studyId!==undefined){
			  	console.log('this.studyState：',this.studyState)
			  	this.studyState = true
			  }else{
			  	this.studyState = false
			  }
			});
			
			
		 //    this.studyId = uni.getStorageSync('studyId').studyId
		 //    console.log('onShow跳转过来了=this.studyId：',this.studyId)
			// if(this.studyId!==undefined){
			// 	console.log('this.studyState：',this.studyState)
			// 	this.studyState = true
			// }else{
			// 	this.studyState = false
			// }
		},
		/**
		 * 页面隐藏时触发
		 * 例如从 A 页面跳转到 B 页面时，A 页面的 onHide 会被触发
		 */
		onHide() {
			console.log('onHide: 页面隐藏时触发');
			this.studyState = false
			eventBus.$off('studyId'); // 使用完后清除存储
		},
		/**
		 * 页面卸载时触发
		 * 例如当页面被关闭或路由切换时
		 */
		onUnload() {
			console.log('onUnload: 页面卸载时触发');
			this.studyState = false
			eventBus.$off('studyId'); // 使用完后清除存储
		},
		mounted() {
			
		},
		methods: {
			back(){
				console.log(123)
				uni.navigateTo({
					url: '/src/views/pageHome/index?id='+this.studyId
				});
				this.studyState = false
				eventBus.$off('studyId'); // 使用完后清除存储
			},
			handleTemplateClick(card){
				console.log('收到数据', card);
				this.stageId = card.stageId
				this.stageList()
			},
			//查询阶段岛屿下的班级
			stageList(){
				queryClsNoStage({stageId:this.stageId}).then(response => {
				  console.log(response,'班级')
				  if (response.code === 0) {
					  this.titleList[0] = response.data
					  this.titleText = response.data[0]
					  this.titleText2 = response.data[0]
					  this.courseList()
					// this.data.case=response.data
				  }else{
					 uni.$u.toast(response.msg) 
				  }
				}).catch(errors => {
				  // uni.$u.toast(errors)
				})
			},
			//查询班级下的课程
			courseList(){
				queryCrsByStuCls({clsId: this.titleText.clsId}).then(response => {
				  console.log(response)
				  if (response.code === 0) {
					  this.dataList = response.data
					  // this.titleText = response.data[0]
					// this.data.case=response.data
				  }else{
					 uni.$u.toast(response.msg) 
				  }
				}).catch(errors => {
				  // uni.$u.toast(errors)
				})
			},
			// 选择班级交互使用********
			//选择班级确定
			pickerConfirm(e) {
				uni.$u.toast('切换成功')
				console.log('confirm', e)
				this.titleText2 = this.titleText
				this.show = false
				this.courseList()
			},
			//选择班级取消
			pickerCancel(e) {
				console.log('confirm=======', e)
				this.show = false
				return e
			},
			//选择值变化
			pickerChange(e){
				console.log(e,'选择值')
				this.titleText = e.value[0]
			},
			// 选择班级交互使用******** 结束
			open() {
				this.show = true
				console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			//跳转详情
			goToRegister(e) {
				console.log(e)
				uni.navigateTo({
					url: '/src/views/pageStudy/index?data='+e.clsCrsId+'&crsId='+e.crsId+'&clsId='+e.clsId+'&clsName='+e.clsName // 这里替换成你实际要跳转的页面路径
				});
			},
			getRefreshInfo(){
				getRefreshInfo().then(response => {
					console.log('获取最新用户信息：', response)
					if (response.code === 0) {
						uni.setStorageSync('token', response.data.token); //存储token
						uni.setStorageSync('isLogin', true); //存储登录状态
						uni.setStorageSync('userInfo', response.data); //存储个人信息
						// this.userInfo = response.data
						this.stageList()
					}else{
					 uni.$u.toast("令牌失效，重新登录") 
					 this.stageList()
					}
				}).catch(errors => {
					this.stageList()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	@import "~@/static/styles/variables.scss";

	.container {
		height: 100vh;
	}
	// 弹出层样式
	::v-deep .u-popup__content{
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding-bottom: 100rpx;
	}
	::v-deep .u-toolbar{
		background: #FFB607;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	::v-deep.u-toolbar__title{
		color: #ffffff !important;
	}
	::v-deep .button_qd{
		position: fixed;
		z-index: 10078;
		width: 360rpx;
		height: 60rpx;
		font-size: 30rpx;
		background: #FF8106;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		bottom: 80rpx;
		margin-left: 25%;
		border-radius: 30rpx;
	}
	//弹出层样式end
	.back{
		height: 170rpx;
		width: 100vw;
		padding-top: 15%;
		padding-left: 30rpx;
		margin-bottom: 40rpx;
		background-color: #FFB607;
	}
	.back-icon{
		width: 40rpx;
		height: 40rpx;
	}
	.title-text{
		color: #fff;
		font-size: 23rpx;
		text-align: center;
		margin-top: -44rpx;
		margin-right: 36rpx;
	}
	.title-text1{
		color: #fff;
		font-size: 23rpx;
		text-align: center;
		margin-top: 0rpx;
		margin-right: 36rpx;
	}
	.heard {
		padding: 30rpx;
		padding-top: 20rpx;
		margin-bottom: 30rpx;
	}
	.title {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.shuoming {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #808080;
		line-height: 44rpx;
	}

	.genghuanbanji {
		width: 150rpx;
		height: 40rpx;
		background: #FF8106;
		text-align: center;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.jiaohuan-icon {
		width: 20rpx;
		height: 14rpx;
		margin-right: 10rpx;
	}

	.textStyle {
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 44rpx;
	}

	.week {
		width: 120rpx;
		height: 40rpx;
		background: #FFB607;
		border-radius: 20rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.main {
		margin-bottom: 30rpx;
		padding: 30rpx;
	}

	.case {
		width: 100%;
		height: 80px;
		background: #FFFFFF;
		border-radius: 11px;
		padding-left: 17px;
		line-height: 80px;
		padding-top: 5%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.point-container-inline {
		display: flex;
		align-items: center;
	}

	.className {
		font-family: Source Han Sans CN;
		font-size: 36rpx;
		color: #333333;
		line-height: 70rpx;
		padding-right: 20rpx;
	}
	.btnStyle{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 20rpx;
	}
	.state-ywc {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 10rpx;
		width: 180rpx;
		height: 59rpx;
		background: #3CAB7E;
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 59rpx;
	}
	.state-wks {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 10rpx;
		width: 180rpx;
		height: 59rpx;
		background: #808080;
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 59rpx;
	}
	.state-wxx {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 10rpx;
		width: 180rpx;
		height: 59rpx;
		background: #FF8106;
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 59rpx;
	}
	.state-ywc {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 10rpx;
		width: 180rpx;
		height: 59rpx;
		background: #3CAB7E;
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 59rpx;
	}
	.state-jxz{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 10rpx;
		width: 180rpx;
		height: 59rpx;
		background: #309DFA;
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 59rpx;
	}
	.points {
		padding-left: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 18rpx;
		color: #333333;
		line-height: 30rpx;
	}
	.point-icon1 {
		width: 45rpx;
		height: 25px;
		margin-right: 20rpx;
	}
	.point-icon {
		width: 20rpx;
		height: 20rpx;
		padding-left: 20rpx;
	}

	.jiantou-icon {
		padding-left: 15rpx;
		width: 15rpx;
		height: 25rpx;
	}

	.popupStyle {
		height: 400rpx;
	}

	.popupHeard {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 77rpx;
		background-color: #FFB607;
		border-radius: 38rpx 38rpx 0rpx 0rpx;
	}

	.popupHeardCase {
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 77rpx;
	}

	.popupMain {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popupMainCase {
		height: 250rpx;
		margin-top: 30rpx;
		overflow-y: auto;
	}
	.popupMainCaseInfo{
		text-align: center;
		width: 100vw;
		height: 64rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
	}
	.popupMainCaseInfoActive{
		border-top: 0.5rpx solid #FFB607;
		border-bottom: 0.5rpx solid #FFB607;
		
		text-align: center;
		width: 100vw;
		height: 64rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
	}
	.popupFoot {
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		height: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popupFootCase {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popupFootCaseLeft {
		text-align: center;
		width: 100rpx;
		height: 40rpx;
		background: #808080;
		border-radius: 20rpx;
		margin-right: 80rpx;

		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	
	.popupFootCaseRight {
		text-align: center;
		width: 100rpx;
		height: 40rpx;
		background: #FF8106;
		border-radius: 20rpx;

		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	.zhanwei{
		padding: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #c1c1c1;
	}
	.empty{
		padding: 30rpx;
		height: 70%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>